<template>
  <div>
    <div style="padding: 10px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>1.下载模板</span>
        </div>
        <div class="text item">
          <div>
            <span
              >请下载我们的模板（Excel文件），该文件含有用来导入数据的标题列。</span
            >
          </div>
          <div>
            <el-button type="text" @click="handleDownloadTemplate"
              >下载模板</el-button
            >
          </div>
        </div>
      </el-card>
    </div>
    <div style="padding: 10px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>2.上传文件</span>
        </div>
        <div class="text item">
          <div>
            <el-upload
              class="upload-import"
              drag
              :action.sync="fileUploadUrl"
              :multiple="false"
              :on-success="hanldeFileUploadSucess"
              :show-file-list="false"
              ref="file"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传xls,xlsx文件，且不超过4M
              </div>
            </el-upload>
          </div>
        </div>
      </el-card>
    </div>

    <div style="padding: 10px" v-if="importFinish">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>3.导入结果</span>
        </div>
        <div class="text item">
          <div>
            <div>导入完成</div>
            <div>总共：{{ importResult.total }}条数据</div>
            <div>
              <el-link type="success"
                >成功：{{ importResult.successfulCount }}条</el-link
              >
            </div>
            <div v-show="importResult.errors && importResult.errors.length > 0">
              <div>
                <el-link type="danger"
                  >失败：{{ importResult.failureCount }}条</el-link
                >
              </div>
              <div v-for="(error, index) in importResult.errors" :key="index">
                <span>{{ error }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { exportData, importData } from "@/api/leps";
import { downloadFile } from "@/api/file";
export default {
  data() {
    return {
      baseUrl: "",
      importResult: { total: 0, successfulCount: 0, failureCount: 0 },
      importFinish: false,
    };
  },
  methods: {
    handleDownloadTemplate() {
      exportData({ moduleCode: this.moduleCode, isTemplate: true }).then(
        (res) => {
          if (!res || !res.id) return;

          let fileId = res.id;
          let fileName = res.fileName + res.fileExtension;
          let contentType = res.contentType;

          downloadFile({ id: fileId }).then((res) => {
            let blob = new Blob([res], {
              type: contentType,
            });
            let link = document.createElement("a");
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();

            window.URL.revokeObjectURL(link.href);
          });
        }
      );
    },
    hanldeFileUploadSucess(response) {
      if (!response) {
        this.$notify({
          title: "失败",
          message: "文件上传失败",
          type: "error",
          position: "bottom-right",
        });
        return;
      }
      this.$refs.file.clearFiles();

      importData({ moduleCode: this.moduleCode, fileId: response.id }).then(
        (res) => {
          if (!res) return;

          this.importResult = res || {};
          this.importFinish = true;

          this.$notify({
            title: "成功",
            message: "导入成功，请查看结果",
            type: "success",
            position: "bottom-right",
          });
          this.$emit("refresh");
        }
      );
    },
  },
  mounted() {
    this.baseUrl = process.env.VUE_APP_BASE_API;
  },
  computed: {
    fileUploadUrl() {
      return this.baseUrl + "api/v1/files";
    },
  },
  props: {
    moduleCode: {
      type: String,
      default: "",
    },
  },
};
</script>
<style>
.upload-import .el-upload {
  width: 100% !important;
}

.el-upload .el-upload-dragger {
  width: 100%;
}
</style>
